<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="renderer" content="webkit">
    <title>办理入住</title>
    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="../../css/base.css">
    <link rel="stylesheet" type="text/css" href="../../fonts/iconfont.css">
    <script type="text/javascript" src="../../framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script src="../../framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->
</head>

<body>

<!--    上方已选房间   -->
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20px;">
    <legend style="text-align:center;">已选择房间</legend>
    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="150">
                <col width="80">
            </colgroup>
            <thead>
            <tr>
                <th>房间号</th>
                <th>房间类型</th>
                <th>容纳人数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="roomlist">
            <tr>
                <td>贤心</td>
                <td>贤心</td>
                <td>贤心</td>
                <td>贤心</td>
            </tr>
            </tbody>
        </table>
    </div>
</fieldset>
<!--    /上方已选房间  -->

<!--表单开始-->
<form class="layui-form" id="from" method="post">
    <div class="layui-form">

        <!-- 隐藏域 提交所有房间 id-->
        <div>
            <input type="hidden" id="roomIdList" name="roomIdList" value="">
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">支付方式</label>
                <div class="layui-input-inline">
                    <input type="text" name="payway" value="线下支付" placeholder="线下支付" readonly="readonly"
                           autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">需付押金</label>
                    <div class="layui-input-inline">
                        <input type="text" id="deposit" name="deposit" placeholder="总押金" readonly="readonly"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">入住时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="startdate" name="startdate" autocomplete="off" class="layui-input" >
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">拟退房时间</label>
                <div class="layui-input-inline">
                    <input type="text" id="enddate"  name="enddate" autocomplete="off" class="layui-input" >
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">确认入住</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script>

    //函数:用于解析父页面来的数据
    function child(obj) {
        //获取父页面传过来的字符串 注意一定要转为json对象!
        var json = JSON.parse(obj);
        //解析json数据 写入对应的页面中
        var content = "";
        var roomIdList="";
        //总押金
        var deposit = 0;

        for (var i = 0; i < json.length; i++) {
            content += '                <tr>\n' +
                '                    <td>' + json[i].roomnum + '</td>\n' +
                '                    <td>' + json[i].roomtype.type + '</td>\n' +
                '                    <td>' + json[i].roomtype.contain + '</td>\n' +
                '                    <td><button class="layui-btn layui-btn-xs" value="' + json[i].room_id + '" type="button">添加入住人信息</button></td>\n' +
                '                </tr>';

            roomIdList+=''+json[i].room_id+',';

            deposit += parseInt(json[i].roomtype.deposit);
        }
        $("#roomlist").html(content);
       $("#roomIdList").attr("value", roomIdList);
        $("#deposit").attr("value", deposit);
    }

    //日期框
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var endDate = laydate.render({
            elem: '#enddate',//选择器结束时间
            format: 'yyyy-MM-dd',
            min: "1970-1-1",//设置min默认最小值
            done: function (value, date) {
                startDate.config.max = {
                    year: date.year,
                    month: date.month - 1,//关键
                    date: date.date
                }
            }
        });
        //日期范围
        var startDate = laydate.render({
            elem: '#startdate',
            format: 'yyyy-MM-dd',
            max: "2099-12-31",//设置一个默认最大值
            done: function (value, date) {
                endDate.config.min = {
                    year: date.year,
                    month: date.month - 1, //关键
                    date: date.date
                };
            }
        });
    });


    //入口函数
    $(function () {
        //绑定点击事件
        $(document).on('click', '#roomlist button', function () {
            var room_id = $(this).attr('value');
            //打开 入住宾客 子页面
            layer.open({
                type: 2,
                title: '房间入住人信息',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area: ['800px', '520px'],
                content: '../indent/checkinShow.html',
                //向子页面传参
                success: function (layero, index) {
                    var iframe = window['layui-layer-iframe' + index];
                    //将点击的房间id 传给子页面
                    iframe.child(JSON.stringify(room_id));
                }
            });
        });


        //函数: 添加新订单
        function addOrder() {
            //传递入住时间 拟退房时间和入住房间id
            $.ajax({
                url: "/order/add",
                contenType:'application/json',
                data:{
                    startdate: $("#startdate").val(),
                    enddate: $("#enddate").val(),
                    roomIdList: $("#roomIdList").val()
                },
                dataType:'json',
                success: function (data) {
                    layer.msg(data);
                }

            })
        }

        layui.use('form', function () {
            var form = layui.form;
            //监听form表单提交
            form.on('submit(formDemo)', function (data) {
                addOrder();
                // location.reload();
                return false;
            });
        });


    });

</script>

</body>

</html>